<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta content="charset=utf-8"/>
    <title>input</title>
    <style type="text/css">
    *{padding:0; margin:0;}
    ul,li{list-style:none;}
    #demo1 li{
		margin-right:10px;
		padding:2px;
		border:1px solid #ccc;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		border-radius:5px;
		-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);
		-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
		box-shadow: 0 0 5px rgba(0,0,0,0.2);
		-webkit-transition:all 0.3s ease;
		-moz-transition:all 0.3s ease;
		-ms-transition:all 0.3s ease;
		-o-transition:all 0.3s ease;
		transition:all 0.3s ease;
	}
	#demo1 li:hover{
		border:1px solid rgba(82, 168, 236, 0.6);
		-webkit-box-shadow:0 0 8px rgba(82, 168, 236, 0.6);
		-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
		box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
	}
	/* demo2 */
	#demo2 li{
		padding:5px;
		margin-right:10px;
		border:1px solid #ccc;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		border-radius:5px;
		-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
		-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
		box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
		-webkit-transition:all 0.3s ease;
		-moz-transition:all 0.3s ease;
		-ms-transition:all 0.3s ease;
		-o-transition:all 0.3s ease;
		transition:all 0.3s ease;
	}
	#demo2 li:hover{
		border:1px solid rgba(82, 168, 236, 0.6);
		-webkit-box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);
		-moz-box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);
		box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);
	}
	/* demo3 */
	#demo3 li{
		width:320px;
		height:180px;
		background-color:#ededed;
		margin:30px 30px 0 0;
		text-align:center;
	}
	#demo3 li:nth-child(-n+2){
		margin-top:0;
	}
	#demo3 li span{
		color:#f00;
	}
	#demo3 li p{
		margin-top:50px;
		font-size:16px;
	}
	#demo3 li:nth-of-type(1){
		-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
		-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
		box-shadow: 0 10px 10px rgba(0,0,0,0.5);
	}
	#demo3 li:nth-of-type(2){
		-webkit-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
		-moz-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
		box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
	}
	#demo3 li:nth-of-type(3){
		-webkit-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
		-moz-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
		box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
	}
	#demo3 li:nth-of-type(4){
		-webkit-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
		-moz-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
		box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
	}
	/* #demo4 */
	#demo4 li{
		width:320px;
		height:180px;
		background-color:#ededed;
		margin:50px 30px 0 30px;
		text-align:center;
		line-height:180px;
		font-size:16px;
		position:relative;
	}
	/*#demo4 li:nth-child(-n+2){
		margin-top:0;
	}*/
	#demo4 li:before,
	#demo4 li:after{
		position:absolute;
		z-index:-1;
	}
	/* bottom right style */
	#demo4 li:nth-of-type(1):after{
		content:"";
		width:50%;
		height:50%;
		right:0;
		top:50%;
		box-shadow:20px 30px 15px rgba(0,0,0,0.2);
		-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);
		-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);
		-ms-transform:skew(10deg,10deg) translate(-40px,-20px);
		-o-transform:skew(10deg,10deg) translate(-40px,-20px);
		transform:skew(10deg,10deg) translate(-40px,-20px);
	}
	/* bottom style */
	#demo4 li:nth-of-type(2):before{
		content:"";
		width:50%;
		height:50%;
		left:0;
		top:50%;
		box-shadow:20px 30px 15px rgba(0,0,0,0.2);
		-moz-transform:skewX(-10deg) skewY(-10deg) translate(0,-20px);
		-webkit-transform:skew(-10deg,-10deg) translate(0,-20px);
		-ms-transform:skew(-10deg,-10deg) translate(0,-20px);
		-o-transform:skew(-10deg,-10deg) translate(0,-20px);
		transform:skew(-10deg,-10deg) translate(0,-20px);
	}
	#demo4 li:nth-of-type(2):after{
		content:"";
		width:50%;
		height:50%;
		right:0;
		top:50%;
		box-shadow:20px 30px 15px rgba(0,0,0,0.2);
		-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);
		-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);
		-ms-transform:skew(10deg,10deg) translate(-40px,-20px);
		-o-transform:skew(10deg,10deg) translate(-40px,-20px);
		transform:skew(10deg,10deg) translate(-40px,-20px);
	}
	/* top left & bottom right style */
	#demo4 li:nth-of-type(3):before{
		content:"";
		width:50%;
		height:50%;
		left:0;
		top:0;
		box-shadow:-20px -30px 15px rgba(0,0,0,0.2);
		-moz-transform:skewX(10deg) skewY(10deg) translate(40px,30px);
		-webkit-transform:skew(10deg,10deg) translate(40px,30px);
		-ms-transform:skew(10deg,10deg) translate(40px,30px);
		-o-transform:skew(10deg,10deg) translate(40px,30px);
		transform:skew(10deg,10deg) translate(40px,30px);
	}
	#demo4 li:nth-of-type(3):after{
		content:"";
		width:50%;
		height:50%;
		right:0;
		top:50%;
		box-shadow:20px 30px 15px rgba(0,0,0,0.2);
		-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);
		-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);
		-ms-transform:skew(10deg,10deg) translate(-40px,-20px);
		-o-transform:skew(10deg,10deg) translate(-40px,-20px);
		transform:skew(10deg,10deg) translate(-40px,-20px);
	}
	/* book style */
	#demo4 li:nth-of-type(4){
	    background: #fff;
	    background: -moz-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
		background: -webkit-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
	    border: 1px solid #ccc;
	    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
	    -moz-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
	    box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
	    -webkit-border-bottom-right-radius: 60px 5px;
	    -moz-border-radius-bottomright: 60px 5px;
	    border-bottom-right-radius: 60px 5px;
	}
	#demo4 li:nth-of-type(4):before{
		content:"";
		width:98%;
		height:98%;
		left:0;
		top:0;
		background-color:#fff;
		border: 1px solid #ccc;
		-webkit-transform:skew(4deg, 2deg) translate(6px, 7px);
		-moz-transform:skewX(4deg) skewY(2deg) translate(6px, 7px);
		-ms-transform:skew(4deg, 2deg) translate(6px, 7px);
		-o-transform:skew(4deg, 2deg) translate(6px, 7px);
		transform:skew(4deg, 2deg) translate(6px, 7px);
		-webkit-border-bottom-right-radius: 60px 5px;
	    -moz-border-radius-bottomright: 60px 5px;
	    border-bottom-right-radius: 60px 5px;
	}
	#demo4 li:nth-of-type(4):after{
		content:"";
		width:98%;
		height:98%;
		left:0;
		top:0;
		background-color:#fff;
		border: 1px solid #ccc;
		-webkit-transform:skew(3deg, 1deg) translate(4px, 4px);
		-moz-transform:skewX(3deg) skewY(1deg) translate(4px, 4px);
		-ms-transform:skew(3deg, 1deg) translate(4px, 4px);
		-o-transform:skew(3deg, 1deg) translate(4px, 4px);
		transform:skew(3deg, 1deg) translate(4px, 4px);
	}
	/* stick style */
	#demo4 li:nth-of-type(5){
		-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
		-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
	}
	#demo4 li:nth-of-type(5):before{
		content:"";
		width:110px;
		height:30px;
		background-color:rgba(255,255,0,0.2);
		z-index:1;
		top:8px;
		left:-32px;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}
	#demo4 li:nth-of-type(5):after{
		content:"";
		width:110px;
		height:30px;
		background-color:rgba(255,255,0,0.2);
		z-index:1;
		bottom:8px;
		right:-32px;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}
    
    </style>
</head>
<body>
    <div id="demo4">
    	<ul>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
    </div>
</body>
</html>
